<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            position: fixed;
            /* 推荐:此种方案可以让遮罩层紧贴html的四个边,撑满全屏*/
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            /* 可以手动设置遮罩层为全屏大小 */
            /*width: 100vw;*/
            /*height: 100vh;*/
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    lorem*60 Tab补全
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusamus adipisci aspernatur, atque culpa
        dolores fuga harum ipsa magni minus nulla numquam optio quae quisquam sed velit vero voluptates.
    </div>
    <div>Architecto dicta ea, natus nobis odit officia quibusdam. Adipisci, aliquam at consequatur corporis ducimus eos
        error excepturi expedita facilis fugit illo illum minus mollitia neque perferendis provident, similique tempora
        tenetur.
    </div>
    <div>Ab ad asperiores aspernatur commodi consectetur debitis, deleniti dolorem dolorum ea eaque enim facere facilis
        harum id ipsam nam omnis pariatur placeat provident quas quia quibusdam quisquam ratione sit ullam?
    </div>
    <div>Doloribus explicabo necessitatibus perspiciatis ratione. Asperiores distinctio earum fuga id in, natus nemo,
        neque nisi possimus qui tempora voluptas! Ab architecto cum deleniti doloribus error, est facere facilis fugiat
        placeat.
    </div>
    <div>Aperiam assumenda aut cumque distinctio dolorum ea eaque earum est fugit illum in inventore ipsam iste
        molestias nam natus, nesciunt perferendis placeat possimus praesentium, provident quae quia unde vero,
        voluptatum.
    </div>
    <div>Adipisci eveniet fugiat harum, maxime quas quasi qui voluptas! Asperiores culpa delectus deleniti neque qui. A
        aliquid assumenda delectus enim excepturi explicabo fugit nam nemo obcaecati officia porro, repellat, sit?
    </div>
    <div>A aspernatur, delectus dolorem error ex iure, libero molestias nisi nobis provident quam sunt! Dolores eius in
        obcaecati, perspiciatis quam, quas qui quos repudiandae sapiente ullam unde ut veniam! Magni?
    </div>
    <div>Aperiam asperiores facere non soluta temporibus! Amet, vero, voluptas. A animi culpa delectus dolor esse hic
        illo mollitia nostrum odit placeat, provident quibusdam quis repellendus saepe sed soluta tempora voluptatum.
    </div>
    <div>Ad adipisci at dignissimos distinctio enim eos ex id impedit ipsum minima molestiae nemo, neque officia
        officiis quasi repellendus suscipit. Accusantium culpa cupiditate illum inventore labore, nihil rem repellendus
        vel!
    </div>
    <div>Adipisci facere magnam molestias velit voluptatem! Deleniti doloremque hic impedit iste laborum natus officia
        saepe tempora vero, voluptas! A alias architecto asperiores doloremque necessitatibus nulla, provident sunt
        suscipit vel vero.
    </div>
    <div>Ad amet corporis doloribus eligendi error eum eveniet ex, excepturi exercitationem expedita fugit impedit
        labore libero modi nam officia porro quas quis, sapiente sed sequi sint suscipit totam vel voluptatem.
    </div>
    <div>Debitis dolores error facere, id, inventore laboriosam numquam perspiciatis quasi saepe sapiente similique
        tempora tenetur voluptates! A cum dolor dolores eos facere fugit ipsum provident quia reiciendis, repudiandae
        vel veniam.
    </div>
    <div>Adipisci asperiores autem cumque deserunt dignissimos distinctio dolor dolorum eius, eum ex excepturi fugit id
        incidunt iusto modi molestias nostrum provident quaerat quasi repellat saepe ut veritatis vero vitae voluptatem!
    </div>
    <div>Eos, sint suscipit. Asperiores dicta doloribus hic incidunt maiores nesciunt optio quae quis quod sed!
        Blanditiis doloremque est sapiente voluptatibus voluptatum? Cupiditate ea esse, minus odio voluptas voluptate!
        Cum, nihil.
    </div>
    <div>Accusantium ad adipisci alias aspernatur consectetur consequatur cumque ea eligendi enim esse eum facilis
        fugiat, impedit itaque laborum nam nisi nobis pariatur perspiciatis quaerat repellendus, sapiente sequi tempore
        unde, vitae.
    </div>
    <div>Aspernatur assumenda consequuntur cupiditate deserunt dolorem eligendi, eos exercitationem explicabo fuga ipsam
        ipsum iste iure maxime minus modi nam quaerat quas, quia repellendus tempora tenetur veniam veritatis vero vitae
        voluptate.
    </div>
    <div>Aspernatur consequatur deleniti, deserunt, doloremque dolores eos impedit ipsum iste maiores modi, nesciunt
        officiis reiciendis. Deserunt eaque eligendi laborum neque, nobis quasi quis quisquam saepe soluta unde ut
        veniam voluptas.
    </div>
    <div>Commodi consequatur corporis dolor dolore dolorum ducimus earum eligendi enim illo itaque labore maiores modi,
        nemo nisi obcaecati odio placeat praesentium quae qui quidem recusandae repudiandae suscipit tempora veniam
        voluptas.
    </div>
    <div>Aspernatur autem delectus dolorem, ea esse est facilis fugit libero, maiores minima minus, modi nemo nobis
        obcaecati odio pariatur praesentium quam quod rem sequi sunt tempora vitae voluptates. Aut, inventore!
    </div>
    <div>Aspernatur exercitationem, illum! Commodi deleniti dolorem doloremque earum enim minima nesciunt officia
        officiis totam voluptates. Accusantium nobis ratione voluptates? Asperiores autem dicta dolores excepturi fugiat
        id illo placeat sed voluptas.
    </div>
    <div>Ab amet, aperiam, at aut, autem cumque dignissimos ducimus eaque earum eligendi eos error ex explicabo fugiat
        fugit id inventore ipsam ipsum odit officiis possimus quae quasi quis veniam vitae!
    </div>
    <div>Animi aspernatur, consectetur deleniti expedita magnam nostrum quis repudiandae. Accusamus autem consectetur
        consequatur consequuntur eos ipsa labore nam natus nemo praesentium quos ratione reiciendis, rerum similique
        sint voluptas voluptatem voluptatibus.
    </div>
    <div>Dignissimos explicabo incidunt minus molestiae nam, optio repellendus? Aliquam eius incidunt, laboriosam,
        laudantium minus natus necessitatibus nihil optio quasi quibusdam rem sint, soluta voluptatem! Earum error in
        odio odit quisquam!
    </div>
    <div>Alias cumque facilis iste maxime quae ut voluptatum. Laboriosam laudantium mollitia odit, placeat quisquam
        totam. Aliquid amet blanditiis dicta error magnam molestiae natus nemo, officiis, pariatur possimus provident
        reiciendis suscipit!
    </div>
    <div>Adipisci aliquam, aliquid aperiam consequuntur cumque eius enim iure labore, laboriosam natus non nostrum
        officia qui reiciendis tempore, veniam voluptates? Amet esse itaque nam nulla odit quo sit suscipit totam?
    </div>
    <div>A culpa deleniti dolores laboriosam libero nam officiis omnis, quas quo quod quos recusandae sed, sequi sint
        soluta velit veritatis. Delectus deleniti fugit magni minima mollitia nam quo quod temporibus!
    </div>
    <div>Adipisci assumenda beatae dolorem dolores hic minus omnis provident quisquam rem soluta? Architecto aspernatur
        atque ea error iusto nulla quos vero. Aut commodi minus neque similique voluptas. Accusantium, id similique?
    </div>
    <div>Assumenda commodi eos maxime, molestias non quisquam sed voluptatibus. Accusamus, alias amet animi architecto
        consequuntur dicta ducimus harum molestiae, natus nihil nisi obcaecati officia omnis qui repellendus. Incidunt
        officia, unde.
    </div>
    <div>Assumenda consequatur ducimus eos molestiae. Beatae consequuntur dolores eius ipsa nam omnis optio quas
        quibusdam sequi! Aliquam distinctio earum facilis perspiciatis unde. Autem consectetur dolor eos, error esse
        possimus praesentium?
    </div>
    <div>Alias ipsum labore laboriosam nisi non odio quisquam quo voluptas voluptatibus? Alias aliquam cumque dolorum
        ducimus eveniet, ipsum laboriosam natus officia omnis perferendis quam quod repellendus tenetur veritatis,
        voluptas voluptatum.
    </div>
    <div>At consequatur, eius eum excepturi fugiat incidunt iste tempore vero! Aliquam animi assumenda consequuntur
        dolorum ducimus enim eveniet, excepturi, nemo neque nisi odit quae quis, ratione sequi suscipit vel veritatis.
    </div>
    <div>Adipisci aut autem error ex incidunt itaque iusto nihil odio totam, voluptatem? Amet dolor esse et explicabo
        fugiat quam reiciendis? Autem beatae dolorem et expedita laudantium nemo similique. Laboriosam, quasi?
    </div>
    <div>Dolorem eaque id illo maxime molestiae nam officiis optio, repudiandae sunt vitae. Aliquam assumenda at
        commodi, debitis dolore dolores ex harum illo illum ipsam iure quaerat tempora vel velit vero?
    </div>
    <div>Ab consequatur deleniti ea, explicabo facere ipsum iure laudantium libero maxime mollitia nobis nulla odio,
        officia porro, qui quis quisquam quos ratione rem reprehenderit repudiandae sit vero vitae voluptatem
        voluptatum?
    </div>
    <div>Accusamus amet commodi culpa cumque deserunt distinctio et expedita fugit illo iste itaque maiores nobis, odio,
        omnis porro provident quia quod recusandae sequi similique sint ut voluptatem. At, eaque, itaque!
    </div>
    <div>Alias architecto asperiores assumenda, doloremque eligendi excepturi facilis impedit in incidunt ipsa non
        perferendis quaerat quos saepe similique tempore ullam velit, voluptates. Doloribus explicabo labore libero
        magni nemo quasi unde.
    </div>
    <div>Distinctio eligendi, expedita maiores officiis qui sit unde. Alias aliquam animi culpa cumque delectus eaque
        eligendi eos et fugit labore maiores nemo officia, perferendis quia voluptates. Alias atque ipsam possimus.
    </div>
    <div>Alias blanditiis doloremque harum, ipsum magni odit perferendis provident quaerat qui reprehenderit rerum,
        sapiente, tenetur. At consequatur, excepturi explicabo fuga harum, hic laboriosam, laborum laudantium mollitia
        porro quisquam totam veniam.
    </div>
    <div>Assumenda autem consectetur deserunt dicta doloremque doloribus eius eligendi eum minima molestias placeat
        porro possimus, quo quod ratione sed temporibus. Commodi est id modi molestias, neque obcaecati quia repudiandae
        similique.
    </div>
    <div>A culpa debitis, delectus dolore dolorum eligendi excepturi laudantium odit, officia pariatur, quia sit
        voluptas! Amet, asperiores atque dolorum eos, iure laudantium modi molestiae natus nesciunt nulla quaerat quis
        suscipit!
    </div>
    <div>Cupiditate explicabo fugiat modi numquam tenetur! Amet assumenda doloremque dolores dolorum ducimus eos esse
        exercitationem explicabo fugit, hic ipsam labore modi molestiae, necessitatibus non odit officiis, quidem quos
        totam veniam.
    </div>
    <div>Ad adipisci alias at, dignissimos dolores dolorum eius, eos error esse eum facilis harum inventore ipsa
        laboriosam libero magni nihil provident quidem quo, repellendus sequi tempora tempore unde vel voluptates.
    </div>
    <div>Accusantium blanditiis cupiditate debitis deserunt dolorum eos facilis fugit, illum iste laborum, magnam minima
        modi molestias mollitia nesciunt odio odit optio possimus quae quia quidem quisquam quod repudiandae, veritatis
        voluptatibus.
    </div>
    <div>Ab alias amet aperiam assumenda consectetur dolor dolorem doloribus, earum eius error et excepturi inventore
        itaque iure modi nesciunt nulla, pariatur quis reiciendis similique sit tempora temporibus ullam ut
        voluptatibus?
    </div>
    <div>A adipisci alias consectetur consequuntur cumque deleniti deserunt dicta, dolor doloribus eius error excepturi
        in ipsum itaque libero, magni minima molestiae officiis quasi qui quibusdam reiciendis reprehenderit rerum
        tempore ullam.
    </div>
    <div>Ipsam iusto magnam temporibus. Ab ad alias architecto consequatur, delectus distinctio eligendi eos et illum in
        inventore itaque molestias nobis nostrum obcaecati officia porro quo recusandae rerum vero. Eveniet, unde.
    </div>
    <div>Blanditiis deleniti dolorem eaque ipsam maxime necessitatibus non, quibusdam quod. Dignissimos earum excepturi
        illum in maiores, maxime nobis provident rem! Amet atque dicta eius et in incidunt modi, tempore. Laborum!
    </div>
    <div>Adipisci assumenda, aut blanditiis doloremque libero magni minus nostrum sed. Adipisci aliquam aliquid
        architecto aut ea eligendi error explicabo fugit, itaque, magnam minima modi, odit quas sapiente sequi veritatis
        voluptate?
    </div>
    <div>Ad architecto culpa cum dolor, doloremque ducimus error expedita harum illum in inventore iusto laborum magnam
        magni, maiores minus neque officia porro repellendus rerum suscipit vero vitae voluptas voluptatibus voluptatum.
    </div>
    <div>Ad aspernatur assumenda blanditiis commodi cupiditate dolores, dolorum ea error exercitationem facere fugiat
        inventore itaque iusto laboriosam modi molestias mollitia quasi quibusdam ratione rerum sed temporibus ullam
        vel, veritatis, voluptatibus!
    </div>
    <div>Blanditiis deleniti, dolorum ea excepturi facere illo illum incidunt iste itaque nulla omnis perferendis
        quibusdam quo reprehenderit, sint, tempora totam ullam velit. Dignissimos est molestiae nulla, perferendis
        perspiciatis recusandae reiciendis!
    </div>
    <div>Dolorum, eaque, similique. Aliquam aut cum deserunt dolore est ipsum nostrum quae reiciendis. Dolorem hic
        laborum natus nobis. Accusamus at culpa distinctio dolor fuga labore quisquam rem temporibus ullam velit.
    </div>
    <div>Atque cupiditate doloribus est eveniet facere id impedit inventore necessitatibus neque nihil odio quisquam
        quos ratione rerum tempore totam, ullam veritatis voluptate! Doloremque eligendi impedit magni molestias nam
        nulla saepe?
    </div>
    <div>Aliquam consequatur culpa debitis delectus ea eos esse est eveniet fugiat id, impedit iure iusto libero maxime
        natus, nisi non nulla perferendis possimus quaerat quas repellat repellendus, saepe tempore velit?
    </div>
    <div>Ab ad adipisci assumenda at beatae cumque dignissimos ducimus esse exercitationem expedita labore, molestias
        nemo odio quis quo rem repellendus similique voluptate voluptatem voluptates. Doloremque dolores nostrum
        possimus praesentium reiciendis.
    </div>
    <div>Architecto atque debitis dolorem enim expedita id incidunt itaque maiores mollitia, nesciunt reiciendis rerum
        vel. Exercitationem, iure quas. Ab aliquam dolore expedita facere harum magni nobis officiis possimus tempora,
        vitae!
    </div>
    <div>A aliquid aut culpa cumque, dolorum in incidunt iure laborum, magni pariatur porro quia saepe soluta veritatis
        voluptatum? A adipisci corporis dolor doloribus harum inventore modi necessitatibus perspiciatis temporibus ut.
    </div>
    <div>Delectus fuga incidunt magni sunt. Aliquam, asperiores aspernatur eligendi excepturi id libero minima nisi
        officia reprehenderit voluptatum! Asperiores aspernatur, aut deleniti exercitationem, hic necessitatibus officia
        sed tempora totam vel voluptatibus.
    </div>
    <div>Adipisci, aliquid autem cum debitis, delectus distinctio est magnam nemo odit quae quidem rem repudiandae
        vitae? Commodi et molestias placeat vero voluptates. Accusamus doloremque dolores iure nesciunt, praesentium
        saepe voluptas.
    </div>
    <div>Ab accusamus ad aliquam aperiam atque corporis debitis dolor, dolorum ducimus inventore laborum maxime nihil
        non nostrum quasi quis quo quos rem repellat repudiandae soluta suscipit ut vero voluptas, voluptate?
    </div>
</div>
</body>
</html>